<template>
  <view class="cart-bar">
    <view v-if="!hasLogin" class="has-login-no" v-on:tap="goToLogin">
      <text style="flex: 1; color: #fff">请先登录再进行操作</text>
      <view class="btn-login btn-login-phone">立即登录</view>
    </view>
    <view v-else class="has-login">
      <view v-on:click="showCart" class="icon-container" v-if="showIcon">
        <image
          src="/static/images/cl.png"
          style="width: 30px; height: 30px"
        ></image>
        <view class="num" v-show="tCount">{{ tCount }}</view>
      </view>
      <view v-else></view>
      <view class="right">
        <view class="content">
          合计:
          <text style="color: #ff2838">￥</text>
          <text style="color: #ff2838; font-size: 19px">{{
            tMoney.toFixed(2)
          }}</text>
        </view>
        <view class="btn-login btn-login-phone" @tap="onOrder">去结算</view>
      </view>
    </view>
    <li-popup
      :cart="cart"
      ref="cartPopup"
      @updateCart="updateCart"
      @change="change($event)"
    />
  </view>
</template>
import { uGetStorageSync, uNavigateTo, uToast } from "../../utils/uniUtils";
<script>
import { ref } from "@vue/composition-api";
import { uGetStorageSync, uNavigateTo, uToast } from "../../utils/uniUtils";

export default {
  props: {
    showIcon: {
      type: Boolean,
      default: true,
    },
    hasLogin: {
      type: Boolean,
      required: true,
    },
    cart: {
      type: Array,
      default: () => [],
    },
    tCount: {
      type: Number,
      default: 0,
    },
    tMoney: {
      type: Number,
      default: 0,
    },
  },

  setup(props, { emit }) {
    function goToLogin() {
      // if (uGetStorageSync("hasBindStore")) {
        uNavigateTo("/pages/login/login");
     /*  } else {
        uToast("未绑定店铺~", "error");
      } */
    }

    const cartPopup = ref(null);
    const show = ref(false);

    function showCart() {
      if (props.cart.length == 0) {
        uToast("您未选择商品~", "none");
        return;
      }

      if (show.value) {
        cartPopup.value.close();
      } else {
        cartPopup.value.open();
      }
    }

    function updateCart() {
      emit("updateCart", {});
    }

    function onOrder() {
      if (props.cart.length == 0) {
        uToast("您未选择商品~", "none");
        return;
      }
      uNavigateTo("/pages/order/cartOrder");
    }

    function change(e) {
      show.value = e;
    }

    return {
      show,
      cartPopup,
      goToLogin,
      showCart,
      onOrder,
      updateCart,
      change,
    };
  },
};
</script>
<style lang="scss" scoped>
.cart-bar {
  background-color: rgba(255, 255, 255, 1);
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 5px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 99999 !important;

  .has-login-no {
    display: flex;
    align-items: center;
    background: linear-gradient(
      to right,
      #665051,
      #665c5d,
      #666666,
      #656565,
      #665958,
      #663e41,
      #66403c
    );
    height: 100%;
    border-radius: 40px;
    padding: 5px 10px;
    padding-left: 24px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
  }

  .has-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    z-index: 99999 !important;

    .icon-container {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 0.5px solid #ffeaed;
      background-color: #fff5f6;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999 !important;

      .num {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 14px;
        height: 14px;
        font-size: 10px;
        background-color: #ff2838;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 14px;
        z-index: 99999 !important;
      }
    }
    .right {
      display: flex;
      height: 100%;
      z-index: 99999 !important;

      align-items: center;
      .content {
        color: #141414;
        z-index: 99999 !important;
      }
      .btn-login {
        text-align: center;
        border-radius: 20px;
        border: none;
        padding: 8px 30px;
        font-size: 12px;
        margin-left: 8px;
        z-index: 99999 !important;
      }
    }
  }

  .btn-login {
    text-align: center;
    font-weight: bold;
    border-radius: 20px;
    border: none;
    padding: 5px 13px;

    &-phone {
      background-color: #ff2838;
      color: #fff;
    }
  }
}
</style>
